<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>

  <script src="./static/js/standalone/babel.js"></script>
  <style type="text/css">
    body,html{
      margin:0px;
      height:100%;
    }

    #txtEditor{
      width:100%;
      height:99.535%;
      padding:0px;
      margin:0px;
      border:0px;
      font-size: 18px;
    }
  </style>
</head>
<body>

<div id="root">sss</div>
<div id="John">sss</div>
<a href="#" id="drag">item</a>
<textarea id="txtEditor"></textarea>
<script src="./index.js" type="module">
</script>
<script type="text/javascript" charset="utf-8">
    document.getElementById('drag').ondragstart = (event) => {
        event.preventDefault()
        ipcRenderer.send('ondragstart', '/path/to/item')
    }
</script>

<script   type="module">
    const  code2=`

import  runApplication   from './static/js/qguan/com/1110111011101110/QGuanRunApplication.js'
@runApplication( "reactTest")
class MyClass {}
`

    let  options= {
        "plugins": [
            ["proposal-decorators" , { "legacy": true }],
            ["syntax-dynamic-import"]

        ]
    }
    var output = Babel.transform(
        code2,options
    );
    loadJs(output.code,function(){
        alert('done');
    });


    function loadJs(code,callback){
        var head = document.getElementsByTagName('head')[0];
        var script=document.createElement('script');
        script.type="module";
        if(typeof(callback)!="undefined"){
            if(script.readyState){
                script.onreadystatechange=function(){
                    if(script.readyState == "loaded" || script.readyState == "complete"){
                        script.onreadystatechange=null;
                        callback();
                    }
                }
            }else{
                script.onload=function(){
                    callback();
                }
            }
        }
        script.innerHTML=code
        head.appendChild(script);
    }

</script>
</body>
</html>